/*
 * @Descripttion:
 * @version:
 * @Date: 2021-04-20 11:06:21
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-09-27 16:41:46
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 */
import { defineStore } from 'pinia'
import { fixedRoutes, asyncRoutes } from '@/router'
import { GetMenus } from '@/api/menu'
import router from '@/router'
import { ref } from 'vue'

export const useMenus = defineStore('menu', () => {
  const generateUrl = (path, parentPath) => {
    return path.startsWith('/')
      ? path
      : path
      ? `${parentPath}/${path}`
      : parentPath
  }
  //asyncRoutes, data
  const getFilterRoutes = (targetRoutes, ajaxRoutes) => {
    const filterRoutes = []
    //遍历用户可以访问的菜单列表
    ajaxRoutes.forEach(item => {
      //使用用户可以访问的菜单的name值 和前端配置的路由的name值比较  相同时再处理他们的下一级
      const target = targetRoutes.find(target => target.name === item.name)

      if (target) {
        const { children: targetChildren, ...rest } = target
        const route = {
          ...rest,
        }

        if (item.children) {
          route.children = getFilterRoutes(targetChildren, item.children)
        }

        filterRoutes.push(route)
      }
    })

    return filterRoutes
  }

  const getFilterMenus = (arr, parentPath = '') => {
    const menus = []

    arr.forEach(item => {
      if (!item.hidden) {
        const menu = {
          url: generateUrl(item.path, parentPath),
          title: item.meta.title,
          icon: item.icon,
        }
        if (item.children) {
          if (item.children.filter(child => !child.hidden).length <= 1) {
            menu.url = generateUrl(item.children[0].path, menu.url)
          } else {
            menu.children = getFilterMenus(item.children, menu.url)
          }
        }
        menus.push(menu)
      }
    })

    return menus
  }

  const menus = ref([])
  const setMenus = data => {
    menus.value = data
  }
  const generateMenus = async () => {
    // // 方式一：只有固定菜单
    //从router路由配置中获取写死的菜单列表
    // const menus = getFilterMenus(fixedRoutes)
    // //设置菜单到layout页面中展示
    // setMenus(menus)

    // 方式二：有动态菜单 目前的菜单都是页面中写死
    // 1、从后台获取菜单：查询登录用户已分配的菜单
    const { code, data } = await GetMenus()

    if (+code === 200) {
      // 添加路由之前先删除所有动态路由
      asyncRoutes.forEach(item => {
        //从router路由中 将所有的动态路由先移除
        router.removeRoute(item.name)
      })
      // 2、过滤出需要添加的动态路由： data表示后端返回的用户可访问的菜单列表
      //asyncRoutes表示 前端配置的动态路由数组
      const filterRoutes = getFilterRoutes(asyncRoutes, data.items)
      //将上面挑选出来的路由 添加到router对象中(最终被渲染到页面中的菜单列表的路由)
      filterRoutes.forEach(route => router.addRoute(route))

      // 生成菜单
      const menus = getFilterMenus([...fixedRoutes, ...filterRoutes])
      setMenus(menus)
    }
  }
  return {
    menus,
    setMenus,
    generateMenus,
  }
})
